<script setup>

import {onMounted, ref} from "vue";

import {testProj1} from "@/utils/projection/test.js";
import {
  StaticSphereEarth,
  StaticPlaneEarth,
  DynamicSphereEarth,
  StaticSphereSky,
  StaticPlaneSky,
  DynamicSphereSky,
  DynamicPlaneSky,
} from "@/utils/projection/projectionCust.js";
import {getRect} from "@/api/projApi.js";

const svgZone1 = ref(null);
const svgZone2 = ref(null);
const svgZone3 = ref(null);
const svgZone4 = ref(null);


const pointsData = [
  {
    'coordinates': [0, 0],
    'properties': {
      'text': 'X',
      'radius': 1,
      'fill': 'red',
      'stroke': 'red',
      'stroke-width': 1
    }
  }, {
    'coordinates': [116.3, 40],
    'properties': {
      'text': '',
      'radius': 1,
      'fill': 'yellow',
      'stroke': 'red',
      'stroke-width': 1
    }
  }
];

const linesData = [
  {
    'coordinates': [
      [0, 0],
      [116.3, 40],
      [116.3, -40],
      [0, 0]
    ]
    , 'properties': {
      'text': 'L'
    }
  }
];

const planesData = [
  {
    'coordinates': [
      [
        [0, 0],
        [116.3, 40],
        [116.3, -40],
        [0, 0]
      ],
      // [
      //   [15, 0],
      //   [100, -20],
      //   [100, 20],
      //   [15, 0]
      // ]
    ],
    'properties': {
      'text': 'P',
      'stroke': 'red',
      'stroke-width': 1,
      'fill': 'orange',
    }
  }
];

const getSvomPoint = async () => {
  let data = [100, 0];
  let ds1 = [];
  let ds2 = [];
  if (data && data.length > 0) {
    let text = '';
    let color = '#e1de87';

    let fov_x = 50;
    let fov_y = 50;

    let coords = await getRect(data[0], data[1], fov_x, fov_y, 2);
    let coords_p = JSON.parse(JSON.stringify(coords));
    coords_p.push(coords_p[0]);
    let d1 = {
      'coordinates': [coords_p],
      'properties': {
        'text': text,
        'fill': color,
        'stroke': 'white',
        'stroke-width': 1,
        'opacity': 0.3
      }
    };
    ds1.push(d1);
    for (let i = 0; i < coords.length; i++) {
      let n = i + 1;
      let d2 = {
        'coordinates': coords[i],
        'properties': {
          'text': n,
          'fill': 'red',
          'stroke': 'white',
          'stroke-width': 1,
          'opacity': 0.3,
          'radius': 3
        }
      }
      ds2.push(d2);
    }
    return [ds1, ds2];
  }
}

onMounted(() => {

  testProj1(svgZone1.value).then(() => {
    console.log('ok');
  });

  // =================================================================

  // let s1 = new StaticPlaneEarth(svgZone1.value, {
  //   sun: true,
  //   moon: false,
  //   switch_to_pos: 1,
  //   sun_zone_radius: 90,
  // }); // { svg_bg_color: 'lightgrey', projection_bg_color: 'lightblue' });
  // s1.setup().then(function () {
  //   // s1.renderLines(linesData);
  //   s1.renderPoints(pointsData, 'top');
  //   s1.renderPolygons(planesData, 'top');
  //   // s1.svg.append('text').text('xxxx').attr('x', 0).attr('y', 10);
  // });

  // =================================================================

  // let s2 = new StaticPlaneSky(svgZone2.value, {
  //   in_out: 1,
  // });
  //
  // let svom;
  // let svoms;
  // const renderSvom = () => {
  //   getSvomPoint().then(([d1, d2]) => {
  //     console.log(d1, d2);
  //     s2.remove(svom);
  //     s2.remove(svoms);
  //     svom = s2.renderPolygons(d1, 'top');
  //     svoms = s2.renderPoints(d2, 'top');
  //   });
  // }
  //
  // s2.setup().then(() => {
  //   // s2.renderLines(linesData);
  //   // s2.renderPoints(pointsData, 'top');
  //   // s2.renderPolygons(planesData, 'top');
  //   renderSvom();
  //   setInterval(renderSvom, 100 * 1000);
  // });

  // =================================================================

  // let s3 = new DynamicSphereSky(svgZone3.value, {
  //   in_out: -1,
  // });
  // s3.setup().then(() => {
  //   // s3.renderLines(linesData);
  //   s3.renderPoints(pointsData, 'top');
  // });

  // =================================================================

  // let s4 = new DynamicSphereSky(svgZone4.value, {
  //   in_out: 1,
  // });
  // s4.setup().then(() => {
  //   // s4.renderLines(linesData);
  //   s4.renderPoints(pointsData, 'top');
  //   s4.renderPolygons(planesData, 'top');
  // });

})

</script>

<template>
  <div class="container">
    <div ref="svgZone1" class="svg-zone"></div>
    <!--    <div ref="svgZone2" class="svg-zone"></div>-->
    <!--    <div ref="svgZone3" class="svg-zone"></div>-->
    <!--    <div ref="svgZone4" class="svg-zone"></div>-->
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.svg-zone {
  flex-grow: 1;
  margin: 0.5em;
  padding: 5px;
//min-width: 500px; //min-height: 500px; background-color: lightgoldenrodyellow;
}

</style>